@use 'sass:math';

.sky_wrapper {
  --color-primary: rgba(220, 219, 219, 0.78);
  --color-surface: #242425;
  --time: 24s;
  
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: var(--color-surface);
  color: var(--color-primary);
  position: absolute;
  inset: 0;
  perspective: 80vmax;
  margin: 0;
  overflow: hidden;

  &:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 111;
    pointer-events: none;
    background: rgba(0, 0, 0, .1);
    mask: linear-gradient(black 10%, transparent 30%, transparent 80%, black 90%);
    backdrop-filter: blur(3vmin) invert(0);
  }
}


@property --shadow-color {
  syntax: "<color>";
  initial-value: transparent;
  inherits: true;
}

.stars {
  position: absolute;
  width: 100vmax;
  height: 100vmax;

  &:before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    filter: url(#stars) saturate(0) brightness(1.5);
    mix-blend-mode: overlay;
    opacity: .15;
    animation: stars-animation 20s ease-in-out infinite;
  }
}

.stars-highlights {
  position: absolute;
  width: 100vw;
  height: 100vh;
  opacity: .6;

  &:before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    filter: url(#stars-highlights) saturate(0) brightness(1.5);
    mix-blend-mode: lighten;
    opacity: .2;
    animation: stars-animation-2 20s ease-in-out infinite;
  }
}

@keyframes stars-animation {
  from {
    translate: 1vmin 2vmin;
    rotate: 0deg;
  }
  30% {
    translate: 1vmin -2vmin;
  }
  50% {
    translate: -1vmin 2vmin;
    rotate: 10deg;
  }
  to {
    translate: 1vmin 2vmin;
    rotate: 0deg;
  }
}


@keyframes stars-animation-2 {
  from {
    translate: 1vmin -2vmin;
  }
  30% {
    translate: -1vmin -2vmin;
  }
  50% {
    translate: 1vmin -2vmin;
  }
  to {
    translate: 1vmin -2vmin;
  }
}

.startails {
  position: absolute;
  inset: 0;
  opacity: .6;

  > div {
    --distance: 20vmax;
    border-radius: 50%;
    width: .55vmax;
    aspect-ratio: 3 / 1;
    background: white;
    translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
    opacity: 0;
    animation: startails-animation 10s calc(var(--delay) * var(--time) * 6) linear infinite;
    box-shadow: 0 0 .2vmax white;
  }

  @for $i from 0 through 200 {
    > div:nth-of-type(#{$i + 1}) {
      --x: #{math.random()};
      --y: #{math.random()};
      --x2: #{math.random() - .5};
      --y2: #{math.random() - .5};
      --delay: #{math.random()};
    }
  }
}

@keyframes startails-animation {
  from {
    opacity: 1;
    translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
    scale: .9;
  }
  2% {
    scale: .4;
  }
  5% {
    translate: calc(var(--x) * 100vw + var(--y2) * var(--distance)) calc(var(--y) * 100vh + var(--x2) * var(--distance));
    opacity: 0;
    scale: 1;
  }


  to {
    translate: calc(var(--x) * 100vw + var(--y2) * var(--distance)) calc(var(--y) * 100vh + var(--x2) * var(--distance));

    scale: 1;
    opacity: 0;
  }
}



.scene {
  display: grid;
  place-items: center;
  position: absolute;
  animation: scene-zoom-in-out var(--time) ease-in-out infinite;
  transform-style: preserve-3d;
  bottom: 40vmax;
}

@keyframes scene-zoom-in-out {
  from {
    transform: scale(.9);
  }
  50% {
    transform: scale(1);
  }
  to {
    transform: scale(.9);
  }
}

@property --space {
  syntax: "<length>";
  initial-value: 0;
  inherits: true;
}



.cuboid {
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateY(312deg) rotateX(350deg) rotateZ(10deg) translateY(20vh);
  --size: 8vmax;
  --size-h: calc(var(--size) / 2);
  --size-h-n: calc(var(--size) / -2);

  .album {
    position: absolute;
    width: 50vmin;
    top: -10px;
    font-weight: bold;
    color: rgba($color: #FFFFFF, $alpha: 0.6);
    .item {
      margin-bottom: 16px;
      text-align: center;
      background-color: rgba($color: #FFFFFF, $alpha: 0.05);
      border-radius: 6px;
      padding: 12px 6px;
    }
  }
  .l {
    left: -65vmin;
    transform: translate3d(var(--size-h), -20vmax, 3vmax) rotateY(90deg);
  }
  .r {
    left: -15vmin;
    top: -20vmax;
    transform: translateZ(-20vmax);
  }

  .top {
    width: var(--size);
    aspect-ratio: 1;
    background: linear-gradient(135deg, #E8DBDD, #989699);
    transform-style: preserve-3d;
    transform: rotateX(90deg) translateZ(var(--size-h-n));
    opacity: .9;
  }

  .front {
    width: var(--size);
    aspect-ratio: 1 / 2;
    background: linear-gradient(#5F595D, transparent 60%);
    opacity: .5;
    transform: translateZ(var(--size-h));
    position: absolute;
  }

  .right {
    width: var(--size);
    aspect-ratio: 1 / 2;
    background: linear-gradient(#5F595D 10%, transparent 90%);
    transform: translate3d(var(--size-h), 0, 0) rotateY(90deg);
    position: absolute;
    opacity: .7;
    mask: radial-gradient(150% 120% at 0% 0%, black, transparent);
  }

  .outline {
    --space: 0vmax;
    --space-h: calc(var(--size) / 2);
    position: absolute;
    width: var(--size);
    aspect-ratio: 1;
    border: .0125vmax solid white;
    transition: all 3s ease-in-out;
    translate: calc(-50% + var(--space-h)) calc(-50% + var(--space-h));
    padding: var(--space);
    --duration: 16s;
    animation: outline-animation var(--duration) 0s cubic-bezier(0.68, 0.27, 0.26, 0.91) infinite;
    opacity: 0;
    box-shadow: inset 0 0 .5vmax rgba(255, 255, 255, .4), 0 0 .5vmax rgba(255, 255, 255, .4);
    --initial-space: var(--size-h);

    &:nth-of-type(2) {
      animation-delay: calc(var(--duration) / 4);
    }

    &:nth-of-type(3) {
      animation-delay: calc(var(--duration) / 4 * 2);

    }

    &:nth-of-type(4) {
      animation-delay: calc(var(--duration) / 4 * 3);
    }
  }
}

@keyframes outline-animation {
  from {
    --space: var(--initial-space, 0vmax);
    opacity: 0;
    filter: blur(0vmax);
  }
  5% {
    opacity: .2;
  }
  40% {
    opacity: .5;
  }
  60% {
    opacity: .05;
    filter: blur(0vmax);
  }
  80% {
    opacity: 0;
  }
  to {
    --space: calc(var(--initial-space, 0vmax) + 25vmax);
    opacity: 0;
    filter: blur(.6vmax);
  }
}





@property --moon-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}

  @keyframes moon-animation {
    from {
      --moon-angle: 180deg;
    }
    50% {
      --moon-angle: 200deg;
    }
    to {
      --moon-angle: 180deg;
    }
  }

  .sun {
    border-radius: 50%;
    width: 25vmax;
    aspect-ratio: 1;
    background: radial-gradient(circle at 60% 60%, #f6f6f6, #E8DBDD, #d9d9d9);
    position: absolute;
    transform: translateY(-30vmax);
    box-shadow: 0 0 14vmax rgba(255, 255, 255, .5), 0 0 22vmax rgba(255, 255, 255, .05), 0 0 42vmax rgba(255, 255, 255, .40);
    transform-style: preserve-3d;
  }

  .planet {
    border-radius: 50%;
    width: 17vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 60% 55%, #252525, #2A2F33 52%, #ede9ea 62%), #ede9ea;
    position: absolute;
    --r: 15vmax;
    --y: calc(-10vmax + sin(var(--moon-angle)) * var(--r));
    --z: calc(cos(var(--moon-angle)) * var(--r) * -1);
    transform: translateY(-23vmax) translateX(10vmax) translateZ(3vmax);
    animation: moon-animation var(--time) ease-in-out infinite;
    box-shadow: 0 0 2.5vmax rgba(255, 255, 255, .12);
    filter: blur(.05vmax);
    transform-style: preserve-3d;
  }


  .planet-2 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 13vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 60% 55%, #e3e3e3, #d2c6c8 52%, #212528 62%, transparent 82%);
    position: absolute;
    --r: 2vmax;
    --y: calc(-35vmax + sin(var(--moon-angle)) * var(--r));
    --z: calc(cos(var(--moon-angle)) * var(--r) * 1);
    transform: translateY(-40vmax) translateX(-20vmax) translateZ(-3vmax);
    animation: moon-animation var(--time) ease-in-out infinite;
  }

  .planet-3 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 2vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 70% 50%, #eeeeee 16%, #b7aeb0 38%, #3c4144 52%, #2d3134 60%, transparent 82%);
    position: absolute;
    transform: translateY(-20vmax) translateX(-20vmax);
    opacity: .6;
  }


  .planet-4 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 1vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 70% 50%, #d0d0d0, #b7aeb0 38%, #121415 52%, #131617 60%, transparent 82%);
    position: absolute;
    transform: translateY(-21vmax) translateX(-22vmax);
    opacity: .5;
  }

  .planet-5 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 10vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 30% 55%, #797777, #515051 52%, #212528 62%, transparent 82%);
    position: absolute;
    --r: 5vmax;
    --y: calc(-35vmax + sin(var(--moon-angle)) * var(--r));
    --z: calc(cos(var(--moon-angle)) * var(--r) * 1);
    transform: translateY(-43vmax) translateX(18vmax) translateZ(-33vmax);
    clip-path: circle();
    animation: moon-animation var(--time) ease-in-out infinite;

    --animation: move-to-left calc(var(--time) * 6) ease-in-out infinite;

    .structure-1 {
      position: absolute;
      inset: -20vmax;
      filter: url(#planet-structure) saturate(0);
      mix-blend-mode: lighten;
      opacity: .4;
      transform: scale(4) translateX(1vmax);
      animation: var(--animation);
    }

    .structure-2 {
      position: absolute;
      inset: -20vmax;
      filter: url(#planet-structure) saturate(0);
      mix-blend-mode: lighten;
      opacity: .5;
      transform: scale(7.5);
      animation: var(--animation);
    }

    .structure-3 {
      position: absolute;
      inset: -20vmax;
      filter: url(#planet-structure) saturate(0);
      mix-blend-mode: lighten;
      opacity: .1;
      transform: scale(.2) translateX(1vmax);
      animation: var(--animation);
    }

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 5% 20%, transparent 30%, #171a1c 60%);
    }
  }


  @keyframes move-to-left {
    from {
      translate: 0 0;
    }

    50% {
      translate: -100% 0;
    }

    to {
      translate: 0 0;
    }
  }


  .planet-6 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 7vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 30% 55%, #f3ecec, #7a7a7a 52%, #212528 72%, transparent);
    position: absolute;
    --r: 6vmax;
    --y: calc(-39.6vmax + sin(var(--moon-angle)) * var(--r));
    --z: calc(cos(var(--moon-angle)) * var(--r) * 1);
    transform: translateY(-40vh) translateX(23vmax) translateZ(3vmax);
    animation: moon-animation var(--time) ease-in-out infinite;
    display: grid;
    place-items: center;

    &::before {
      content: '';
      position: absolute;
      border-radius: 50%;
      width: 12vmax;
      height: 1vmax;
      border: 1vmax solid #5e5e5e;
      box-shadow: inset 0 0 1rem black;
      transform: rotate(25deg);
      mask: radial-gradient(circle at 50% -20%, transparent 30%, black);
      clip-path: ellipse(47% 22% at 50% 50%);
      filter: blur(.5vmax);
    }

    &::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      width: 12vmax;
      height: 1vmax;
      border: 2.6vmax solid #43484C;
      box-shadow: inset 0 0 1rem black;
      transform: rotate(25deg);
      mask: radial-gradient(circle at 50% -20%, transparent 30%, black);
      clip-path: ellipse(47% 22% at 50% 50%);
    }
  }


  .planets, .planets-2 {
    position: absolute;
    inset: 0;


    > div {
      --distance: 20vmax;
      border-radius: 50%;
      width: 1.6vmax;
      aspect-ratio: 1;
      background: radial-gradient(90% 90% at 70% 50%, #bbbaba, #888586 38%, #121415 52%, #131617 60%, transparent 82%);
      opacity: .5;
      filter: blur(.1rem);
      translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
    }

    @for $i from 0 through 50 {
      > div:nth-of-type(#{$i + 1}) {
        --x: #{math.random()};
        --y: #{math.random()};
        --x2: #{math.random() - .5};
        --y2: #{math.random() - .5};
        --delay: #{math.random()};
      }
    }
  }

  .planets-2 {
    > div {
      width: .5vmax;
      opacity: .6;
      filter: unset;
    }
  }


  .object {
    position: absolute;
    display: grid;
    display: none;
    place-items: center;
    transform: rotateY(45deg) translateZ(6vmax);
    translate: 5vmax 5vmax;

    .body {
      position: absolute;
      display: grid;
      place-items: center;
      --content: '🏄‍♂️';
      --content: '🐋';
      //--content: '🐬';
      //--content: '🐚';
      //--content: '🕊️';
      //--content: '🌴';
      font-size: 6vmax;
      color: initial;
      z-index: 1111;

      &:before {
        content: var(--content);
        transform: scaleX(-1);
        filter: saturate(0) brightness(1.1) drop-shadow(0 0 1vmax rgba(0, 0, 0, .4));
        z-index: 1111;
      }

      &:after {
        content: var(--content);
        transform: scaleX(-1) scaleY(-1) translateY(2.5vmax);
        filter: saturate(0) brightness(0);
        mask: linear-gradient(to bottom, transparent 60%, black 80%);
        z-index: 115;
      }
    }
  }



  .human {
    position: absolute;
    display: grid;
    place-items: center;
    //border: 1px solid red;
    width: 6vmax;
    height: 14vmax;
    translate: 0 17vh;
    z-index: 111;

    &:not(.shadow) {
      filter: invert(.04) drop-shadow(0 0 1.5vmax rgba(250, 250, 250, .6));
    }

    > div {
      position: absolute;
    }


    .head {
      background: white;
      width: 1.5vmax;
      height: 1.6vmax;
      border-radius: 50%;
      translate: 0.2vmax -6.2vmax;
      rotate: 355deg;

      &:before {
        content: ""; // nose
        position: absolute;
        background: white;
        width: 0.27vmax;
        height: 0.7vmax;
        border-radius: 50%;
        translate: 1.19vmax 0.5vmin;
        rotate: 136deg;
        animation: head-nose calc(var(--time) / 4) ease-in-out infinite;
        @keyframes head-nose {
          from {
            translate: 1.19vmax 0.5vmin;

          }
          50% {
            translate: 1.06vmax 0.5vmin;

          }
          to {
            translate: 1.19vmax 0.5vmin;

          }
        }
      }

      &:after {
        content: ""; // chin
        position: absolute;
        background: white;
        width: 1.1vmax;
        height: 0.9vmax;
        border-radius: 50%;

        translate: 0.45vmax .66vmax;
        rotate: 45deg;
        animation: head-chin calc(var(--time) / 4) ease-in-out infinite;
        @keyframes head-chin {
          from {
            translate: 0.45vmax .66vmax;

          }
          50% {
            translate: 0.2vmax .66vmax;

          }
          to {
            translate: 0.45vmax .66vmax;

          }
        }
      }
    }

    .neck {
      background: white;
      width: 0.8vmax;
      height: 1.5vmax;
      border-radius: 50%;
      translate: 0.2vmax -5.4vmax;

      &:before {
        content: ""; // right
        position: absolute;
        width: 0.3vmax;
        height: 1.5vmax;
        background: white;
        border-radius: 50%;
        translate: 0.6vmax 0.4vmax;
        rotate: 352deg;
      }
    }

    .body {
      z-index: 11;

      > div {
        position: absolute;
      }

      .shoulder {
        &:before {
          content: '';
          position: absolute;
          width: 1.3vmax;
          height: 0.5vmax;
          background: white;
          border-radius: 50%;
          translate: -1.1vmax -5vmax;
          rotate: 330deg;
        }

        &:after {
          content: '';
          position: absolute;
          width: 1.3vmax;
          height: 0.5vmax;
          background: white;
          border-radius: 50%;
          translate: 0.4vmax -4.9vmax;
          rotate: 24deg;
        }
      }

      .back {
        width: 1.3vmax;
        height: 4.1vmax;
        background: rgb(250, 250, 250);
        border-radius: 20%;
        translate: -0.2vmax -4.9vmax;
        rotate: 357deg;

        &:before {
          content: "";
          position: absolute;
          width: 2.9vmax;
          height: 1.5vmax;
          background: rgb(250, 250, 250);
          border-radius: 50%;
          translate: -1.4vmax 0.7vmax;
          rotate: 69deg;
          z-index: -1;
        }

        &:after {
          content: "";
          position: absolute;
          width: 2.6vmax;
          height: 1vmax;
          background: rgb(250, 250, 250);
          border-radius: 50%;
          translate: 0.1vmax 1.1vmax;
          rotate: 107deg;
        }
      }

      .hip {
        .center {
          position: absolute;
          width: 1.6vmax;
          height: 1.8vmax;
          background: radial-gradient(white, #f5f5f5);
          border-radius: 39.6%;
          translate: -0.3vmax -3vmax;
          rotate: 267deg;
          display: grid;
        }

        &:before {
          content: ''; // left
          position: absolute;
          width: 1.6vmax;
          height: 2.2vmax;
          background: radial-gradient(white, #e7e4e4);
          border-radius: 46.5%;
          translate: -0.6vmax -2.5vmax;
          rotate: 8deg;
        }

        &:after {
          content: ''; // right
          position: absolute;
          width: 1.3vmax;
          height: 2.2vmax;
          background: radial-gradient(white, #f6f5f5);
          border-radius: 41.1%;
          translate: 0.3vmax -2.2vmax;
          rotate: 161deg;
        }
      }

    }

    .leg {
      &.right {
        width: 1.1vmax;
        height: 2.9vmax;
        background: white;
        border-radius: 50%;
        translate: 1.2vmax 0.4vmax;
        rotate: 348deg;

        &:after {
          content: "";
          position: absolute;
          width: 0.7vmax;
          height: 2.9vmax;
          background: white;
          border-radius: 50%;
          translate: 0.5vmax 0.2vmax;
          rotate: 13deg;
        }

        .knee {
          position: absolute;
          height: 1.7vmax;
          width: 0.75vmax;
          background: white;
          border-radius: 39.6%;
          translate: 0vmax 2.2vmax;
          rotate: 15deg;
        }

        .lower {
          position: absolute;
          height: 3.2vmax;
          width: 0.8vmax;
          background: white;
          border-radius: 50%;
          translate: -0.3vmax 2.4vmax;
          rotate: 15deg;

          &:before {
            content: "";
            position: absolute;
            width: 0.5vmax;
            height: 1.5vmax;
            background: white;
            border-radius: 67.8%;
            translate: 0.5vmax 2.6vmax;
            rotate: 66deg;
          }

          &:after {
            content: "";
            position: absolute;
            width: 0.5vmax;
            height: 1.5vmax;
            background: white;
            border-radius: 27.8%;
            translate: 0.1vmax 2.3vmax;
            rotate: 0deg;
          }
        }
      }

      &.left {
        width: 1.1vmax;
        height: 2.9vmax;
        background: #f4efef;
        border-radius: 50%;
        translate: -0.3vmax 0.4vmax;
        rotate: 2deg;
        filter: invert(.04);
        z-index: -1;

        &:after {
          content: "";
          position: absolute;
          width: 0.7vmax;
          height: 2.9vmax;
          background: #f4efef;
          border-radius: 50%;
          translate: 0.5vmax 0.2vmax;
          rotate: 13deg;
        }

        .knee {
          position: absolute;
          height: 1.7vmax;
          width: 0.75vmax;
          background: #e7e4e4;
          border-radius: 39.6%;
          translate: 0vmax 2.2vmax;
          rotate: 5deg;
        }

        .lower {
          position: absolute;
          height: 3.2vmax;
          width: 0.8vmax;
          background: #eae6e6;
          border-radius: 50%;
          translate: -0.1vmax 1.9vmax;
          rotate: 5deg;

          &:before {
            content: "";
            position: absolute;
            width: 0.5vmax;
            height: 1.5vmax;
            background: #e7e4e4;
            border-radius: 67.8%;
            translate: 0.5vmax 2.6vmax;
            rotate: 47deg;
          }

          &:after {
            content: "";
            position: absolute;
            width: 0.5vmax;
            height: 1.55vmax;
            background: #e7e4e4;
            border-radius: 27.8%;
            translate: 0.1vmax 2.3vmax;
            rotate: 0deg;
          }
        }
      }
    }

    .arm {
      &.right {
        position: absolute;
        width: 0.7vmax;
        height: 2.9vmax;
        background: white;
        border-radius: 27.8%;
        translate: 1.6vmax -3.1vmax;
        rotate: 346deg;
        animation: arm-right calc(var(--time) / 4) ease-in-out infinite;
        @keyframes arm-right {
          from {
            rotate: 346deg;
          }
          50% {
            rotate: 350deg;
          }

          to {
            rotate: 346deg;
          }
        }

        &:before {
          content: "";
          position: absolute;
          width: 0.3vmax;
          height: 2.45vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.3vmax 2.1vmax;
          rotate: 6deg;
        }

        &:after {
          content: "";
          position: absolute;
          width: 0.4vmax;
          height: 2.15vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.1vmax 2.1vmax;
          rotate: 351deg;
        }

        .hand {
          position: absolute;
          width: 0.3vmax;
          height: 0.85vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.3vmax 3.7vmax;
          rotate: 353deg;

          &:after {
            content: '';
            position: absolute;
            width: 0.5vmax;
            height: 0.55vmax;
            background: white;
            border-radius: 39.2%;
            translate: -0.2vmax 0.6vmax;
            rotate: 65deg;
          }
        }
      }

      &.left {
        width: 0.7vmax;
        height: 2.5vmax;
        background: white;
        border-radius: 59.8%;
        translate: -0.9vmax -3.4vmax;
        rotate: 359deg;
        filter: invert(.1);
        z-index: -2;
        animation: arm-left calc(var(--time) / 4) ease-in-out infinite;
        @keyframes arm-left {
          from {
            rotate: 359deg;
          }
          50% {
            rotate: 364deg;
          }

          to {
            rotate: 359deg;
          }
        }

        &:before {
          content: "";
          position: absolute;
          width: 0.3vmax;
          height: 2.45vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.3vmax 1.8vmax;
          rotate: 6deg;
        }

        &:after {
          content: "";
          position: absolute;
          width: 0.4vmax;
          height: 2.15vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.2vmax 2.1vmax;
          rotate: 351deg;
        }

        .hand {
          position: absolute;
          width: 0.3vmax;
          height: 0.85vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.3vmax 3.7vmax;
          rotate: 353deg;

          &:after {
            content: '';
            position: absolute;
            width: 0.5vmax;
            height: 0.55vmax;
            background: white;
            border-radius: 39.2%;
            translate: -0.1vmax 0.2vmax;
            rotate: 65deg;
          }
        }
      }
    }


    &.shadow {
      transform: scaleY(-1) translateY(-9vmax);
      filter: invert(.2);
      opacity: .5;
      z-index: 0;
      mask: linear-gradient(to top, black 25%, transparent 35%);

      .leg.left {
        .lower {
          &:before {
            rotate: 102deg;
          }
        }
      }

      .leg.right {
        .lower {
          &:before {
            rotate: 102deg;
          }
        }
      }
    }

  }


.highlight {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background: radial-gradient(50vmin 70vmin at 70% 70%, rgba(255, 255, 255, .12), transparent),
  radial-gradient(40vmin 30vmin at 70% 70%, rgba(255, 255, 255, .12), transparent),
  radial-gradient(40vmin 60vmin at 10% 70%, rgba(255, 255, 255, .14), transparent),
  radial-gradient(80vmin 100vh at 30% 70%, rgba(255, 255, 255, .10), transparent);
  filter: blur(5vmin);
  pointer-events: none;
}

.color-filter {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background: conic-gradient(at 50% 60%, rgb(50 56 92 / 27%), rgb(152 75 132 / 7%), rgb(150 75 152 / 4%), rgb(50 56 92 / 27%));
  mix-blend-mode: color;
  pointer-events: none;
}

.audio-icon-button {
  border: 0.0625rem white solid;
  padding: .5rem;
  width: 2.265rem;
  height: 2.265rem;
  border-radius: 50%;
  background: transparent;
  position: fixed;
  right: 2rem;
  top: 2rem;

  aspect-ratio: 1;
  display: flex;
  gap: .125rem;
  align-items: center;
  justify-content: center;
  opacity: .5;
  transition: opacity .3s ease;

  @media (hover) {
    cursor: pointer;
    &:hover {
      opacity: 1;
    }
  }

  .bar {
    background: white;
    height: 1.5rem;
    width: .0825rem;


    &:nth-of-type(1), &:nth-of-type(5) {
      height: .5rem;
    }

    &:nth-of-type(2), &:nth-of-type(4) {
      height: 1rem;
    }
  }
}




